import { useRef } from 'react'
import Handsontable from 'handsontable'
import { HotTable } from '@handsontable/react'
import { Settings } from 'handsontable/plugins/contextMenu'
// import 'handsontable/dist/handsontable.full.min.css'

const hotContextMenu: Settings = {
  items: {
    row_above: {
      name: '在上方插入一行'
    },
    row_below: {
      name: '在下面插入一行'
    },
    sp1: '---------',
    col_left: {
      name: 'Insert column left'
    },
    col_right: {
      name: 'Insert column right'
    },
    remove_row: {
      name: 'Remove row'
    },
    remove_col: {
      name: 'Remove column'
    },
    remove_row_below: {
      name: 'Remove rows below'
    },
    remove_row_above: {
      name: 'Remove rows above'
    }
  }
}

const HandTable = () => {
  const hotTableRef = useRef(null)
  const handleHotTalbeAfterChange = (changes: Handsontable.CellChange[] | null, source: Handsontable.ChangeSource) => {
    if (changes && source === 'edit') {
      console.log(changes)
    }
  }
  // const handleAfterPaste = (data: any[][]) => {
  //   console.log(data)
  // }
  return (
    <HotTable
      licenseKey="non-commercial-and-evaluation" // 使用非商业版
      ref={hotTableRef}
      // data={dataSource} // 数据源
      rowHeaders={true} // 显示行头
      colHeaders={true} // 显示列头
      contextMenu={hotContextMenu} // 右键菜单
      className="htCenter" // 居中显示
      // height="100%"
      width="100%"
      stretchH="all" // 列宽自动分配，填充整个容器
      autoWrapRow={true} // 自动换行
      autoWrapCol={true} // 自动换行
      startRows={10} // 初始行数
      startCols={10} // 初始列数
      rowHeights={30} // 行高
      // readOnly={false} // 是否只读
      afterChange={handleHotTalbeAfterChange} // 单元格改变事件
      // afterPaste={handleAfterPaste} // 粘贴事件
    />
  )
}
export default HandTable
